import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { DatePicker, Form, Space, Button, Select } from 'antd';
// @ts-ignore
import { PlusCircleOutlined, FileTextOutlined, DownloadOutlined } from '#/utils/antdIcons';
import { DownOutlined } from '#/utils/antdIcons.js';
// @ts-ignore
import { TjStation } from '@/pages/ETrade/components';
import ConfigModal from '../ConfigModal';
import type { IFormValue, IStationsDataType, IDataListType } from '../../../type';
import { IMaintenancePlanModalType } from '../../../type';
import styles from './index.less';
import { PLAN_STATE_OPTION } from '../../../dictionary';
import { useDebounceFn } from 'ahooks';
interface IProps {
  /**
   * 表单值
   */
  values?: IFormValue;
  /**
   * 全部交易单元
   */
  allStationData?: IStationsDataType;
  /**
   * 搜索数据
   */
  onSearch?: (values: IFormValue) => void;
  /**
   * 编辑检修计划表
   */
  onEdit?: (record: IDataListType, type: IMaintenancePlanModalType, onReview?: any) => void;
  /**
   * 默认请求
   */
  defaultRequest?: () => void;
  /**
   * 导出检修计划
   */
  exportMaintenancePlan?: () => void;
  /**
   * 导出按钮权限
   */
  canEport?: boolean;
}

const DrawerHeader = (props: IProps) => {
  const [form] = Form.useForm();
  const {
    values = {},
    allStationData,
    onSearch,
    onEdit,
    defaultRequest,
    exportMaintenancePlan,
    canEport,
  } = props;
  const [visible, setVisible] = useState<boolean>(false); // 操作日志
  useEffect(() => {
    const { startDate, endDate, ...rest } = values;
    const _values = {
      date:
        startDate && endDate
          ? [moment(startDate), moment(endDate)]
          : [moment().startOf('year'), moment().endOf('year')],
      planState: -1,
      ...rest,
    };
    form && form.setFieldsValue(_values);
  }, [values]);

  // 修改日期
  const onChangeDate = () => {
    const { date, ...rest } = form && form.getFieldsValue();
    const _startDate = date[0]
      ? moment(date[0])?.format('YYYY')
      : moment().startOf('year').format('YYYY');
    const _endDate = date[1]
      ? moment(date[1])?.format('YYYY')
      : moment().endOf('year').format('YYYY');
    let _date = date;
    if (_startDate !== _endDate) {
      _date = [date[0], moment(date[0]).endOf('year')];
    }
    const _values = {
      ...rest,
      date: _date,
    };
    form && form.setFieldsValue(_values);
  };

  // 新建计划
  const _addMaintenancePlan = () => {
    onEdit && onEdit({}, IMaintenancePlanModalType.ADD);
  };

  // 搜索
  const onFinish = (data: any) => {
    const { date, planState, ...rest } = data;
    onSearch &&
      onSearch({
        ...rest,
        planState: planState,
        startDate: moment(date[0]).format('YYYY-MM-DD'),
        endDate: moment(date[1]).format('YYYY-MM-DD'),
      });
  };

  const handleConfigModal = () => {
    setVisible(true);
  };

  // 关闭操作日志
  const onClose = () => {
    setVisible(false);
  };
  const _onReset = useDebounceFn(
    () => {
      defaultRequest && defaultRequest();
    },
    { wait: 500 },
  );
  return (
    <div className={styles.container}>
      <Form
        form={form}
        name="filter"
        requiredMark={false}
        colon={false}
        autoComplete="off"
        onFinish={onFinish}
      >
        <Form.Item name="stationIdList" rules={[{ required: true, message: '请选择交易单元' }]}>
          <TjStation
            style={{ width: 200 }}
            options={allStationData?.dealElementModalOptions || []}
          />
        </Form.Item>
        <Form.Item name="date" rules={[{ required: true, message: '请选择时间' }]}>
          <DatePicker.RangePicker
            format={['YYYYMMDD', 'YYYYMMDD']}
            placeholder={['请选择', '请选择']}
            className={styles.datePicker}
            onChange={onChangeDate}
          />
        </Form.Item>
        <Form.Item name="planState" rules={[{ required: true, message: '请选择检修计划' }]}>
          <Select placeholder={'检修计划'} style={{ width: 140 }} options={PLAN_STATE_OPTION} />
        </Form.Item>
        <Space size={'middle'}>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            查询
          </Button>
          <Button className={styles.reset} htmlType="reset" onClick={_onReset.run} ghost>
            重置
          </Button>
        </Space>
      </Form>
      <div className={styles.addMaintenancePlan}>
        <div className={`${canEport && styles.disabled}`} onClick={exportMaintenancePlan}>
          <DownloadOutlined />
          <span className={styles.exportText}>导出</span>
        </div>
        <span onClick={_addMaintenancePlan}>
          <PlusCircleOutlined className={styles.addMaintenancePlanLogo} />
          <span className={styles.addMaintenancePlanText}>新建计划</span>
        </span>
        <span className={styles.operate} onClick={handleConfigModal}>
          <FileTextOutlined className={styles.yearlyPlansLog} />
          <span className={styles.operation}>操作日志</span>
        </span>
      </div>
      <ConfigModal visible={visible} onClose={onClose} allStationData={allStationData} />
    </div>
  );
};

export default DrawerHeader;
